<!-- 表白 -->
<template>
  <div class="like">
    <NavBar :fnTitle="title"></NavBar>
    <div class="content">
      <div class="theme_squ">
        <div class="theme_squ_top" style="font-size:15px;margin-top:10px;">话题广场</div>
        <div class="theme_squ_bottom">
          <div class="theme1">
            <div class="main_info">海底捞</div>
            <div class="detail"></div>
          </div>
          <div class="theme2">
            <div class="main_info">卖舍友</div>
            <div class="detail"></div>
          </div>
          <div class="theme3">
            <div class="main_info">找对象</div>
            <div class="detail"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 信息展示 -->
      <div class="info_show" :data="info_show_all">
      <div style="font-size:15px;margin-top:10px;">动 态</div>
      <div v-for="item in info_show_all" :key="item.id">
        <div class="top" style="margin-top:60px;" >
          <img src="https://gitee.com/cuckoo-of-life/imgs/raw/master/20211108091908.png" alt="" style="position:relative;left:47.5%;top:-10%;">
           <div class="top_text">{{item.text}}</div>
        </div>
        <div class="bottom">
        <div class="bottom_left">
          <van-icon size="25" name="like" color="#ee0a24" />
          <span>{{item.praise_number}}</span>
        </div>
        <div class="bottom_right">
          <van-icon size="25" name="star" color="rgb(238, 233, 84)" />
          <span>{{item.collect_number}}</span>
          <van-icon size="25" name="share" color="rgb(49, 173, 255)" />
          <span>{{item.share_number}}</span>
          <van-icon size="25" name="chat" color="rgb(135, 238, 84)" />
          <span>{{item.comment_number}}</span>
        </div>
      </div>
      </div>
      </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import Vue from 'vue'
import axios from 'axios'
Vue.use(axios)
export default {
  mounted() {
    this.confirm_login();
    this.showall();
  },
  data() {
    return {
      title: '表白',
      info_show_all:[]
    }
  },
  components: {
    NavBar
  },
  methods: {
    showall() {
      let that = this
      axios.get('http://39.96.36.251/api/love/showall','')
      .then(function(res){
        if(res.data.code == 200){
          that.info_show_all = res.data.data;
        }
      })
      .catch(function(err){
        console.log(err);
      })
    },
    confirm_login() {
      const token = sessionStorage.getItem('token')
      if(token == null){
        this.$router.replace('/login')
      }
    },
    //点赞
    // addzan() {
    //   const that = this;
    //   const user_id = sessionStorage.getItem('user_id')
    //   axios.post('http://39.96.36.251/api/tucoa/addzon',{
    //     text:'1',
    //     id:user_id
    //   })
    //   .then(function(res){
    //     console.log(res);
    //   })
    //   .catch(function(err){
    //     console.log(err);
    //   })
    // }
  }
}
</script>

<style scoped>
.theme_squ {
  width: 80%;
  margin: 0 auto;
  margin-top: 15px;
}
.theme_squ_bottom {
  display: flex;
  margin-top: 15px;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 1px solid pink;
}
.theme1,.theme2,.theme3 {
  width: 2rem;
  background-color: rgb(252, 129, 150);
  height: 2rem;
}
.main_info {
  color: white;
  padding-left: 5px;
}
.detail {
  padding: 5px;
}
.info_show {
  width: 80%;
  margin: 0 auto;
}
.top {
  height: 100px;
  background-color: rgb(252, 129, 150);
}
.bottom {
  display: flex;
  background-color: rgba(218, 218, 218, 0.247);
}
.bottom_left,.bottom_right {
  width: 50%;
}
.bottom_left .van-icon,
.bottom_right .van-icon {
  vertical-align: middle;
}
.bottom_left span,
.bottom_right span {
  vertical-align: middle;
  margin-right: 10px;
}
.show {
  margin-top: 15px;
}
.top_text {
  padding: 2px 10px;
  font-size: 14px;
  overflow: hidden;
}
</style>
